<template>
  <view class="order-item" @click="onOrderClick">
    <view class="order-item__header">
      <view class="order-item__shop">
        <text class="order-item__shop-name">互成一家服务</text>
      </view>
      <view class="order-item__status" :class="`order-item__status--${order.status}`">
        {{ getStatusText(order.status) }}
      </view>
    </view>
    
    <view class="order-item__content">
      <image :src="order.service.image" mode="aspectFill" class="order-item__image" />
      <view class="order-item__info">
        <view class="order-item__title">{{ order.service.title }}</view>
        <view class="order-item__option">{{ order.service.option }}</view>
        <view class="order-item__price-info">
          <text class="order-item__price">{{ order.service.price }}</text>
          <text class="order-item__quantity">x{{ order.service.quantity }}</text>
        </view>
      </view>
    </view>
    
    <view class="order-item__footer">
      <view class="order-item__total">
        <text>共{{ order.service.quantity }}件</text>
        <text class="order-item__amount">实付款：<text class="order-item__amount-text">¥{{ order.price.total.toFixed(2) }}</text></text>
      </view>
      
      <view class="order-item__actions">
        <!-- 待付款状态 -->
        <block v-if="order.status === 'pending'">
          <view class="order-item__btn order-item__btn--default" @click.stop="onCancelOrder">取消订单</view>
          <view class="order-item__btn order-item__btn--primary" @click.stop="onPayOrder">立即支付</view>
        </block>
        
        <!-- 进行中状态 -->
        <block v-else-if="order.status === 'processing'">
          <view class="order-item__btn order-item__btn--default" @click.stop="onViewDetail">查看详情</view>
          <view class="order-item__btn order-item__btn--primary" @click.stop="onConfirmOrder">确认完成</view>
        </block>
        
        <!-- 已完成状态 -->
        <block v-else-if="order.status === 'completed' && !order.reviewed">
          <view class="order-item__btn order-item__btn--default" @click.stop="onOrderAgain">再次购买</view>
          <view class="order-item__btn order-item__btn--primary" @click.stop="onReviewOrder">评价服务</view>
        </block>
        
        <!-- 已完成已评价 -->
        <block v-else-if="order.status === 'completed' && order.reviewed">
          <view class="order-item__btn order-item__btn--default" @click.stop="onViewDetail">查看详情</view>
          <view class="order-item__btn order-item__btn--primary" @click.stop="onOrderAgain">再次购买</view>
        </block>
        
        <!-- 已取消状态 -->
        <block v-else-if="order.status === 'cancelled'">
          <view class="order-item__btn order-item__btn--default" @click.stop="onDeleteOrder">删除订单</view>
          <view class="order-item__btn order-item__btn--primary" @click.stop="onOrderAgain">再次购买</view>
        </block>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  order: {
    type: Object,
    required: true
  }
});

const emit = defineEmits([
  'click', 
  'cancel', 
  'pay', 
  'confirm', 
  'review', 
  'again', 
  'delete'
]);

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'pending': return '待支付';
    case 'processing': return '服务中';
    case 'completed': return '已完成';
    case 'cancelled': return '已取消';
    default: return '未知状态';
  }
};

// 点击订单
const onOrderClick = () => {
  emit('click', props.order.id);
};

// 取消订单
const onCancelOrder = () => {
  emit('cancel', props.order.id);
};

// 支付订单
const onPayOrder = () => {
  emit('pay', props.order.id);
};

// 确认完成
const onConfirmOrder = () => {
  emit('confirm', props.order.id);
};

// 查看详情
const onViewDetail = () => {
  emit('click', props.order.id);
};

// 评价服务
const onReviewOrder = () => {
  emit('review', props.order.id);
};

// 再次购买
const onOrderAgain = () => {
  emit('again', props.order);
};

// 删除订单
const onDeleteOrder = () => {
  emit('delete', props.order.id);
};
</script>

<style lang="scss" scoped>
.order-item {
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f5f5f5;
  }
  
  &__shop {
    display: flex;
    align-items: center;
  }
  
  &__shop-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }
  
  &__status {
    font-size: 13px;
    
    &--pending {
      color: #ff9800;
    }
    
    &--processing {
      color: #2196f3;
    }
    
    &--completed {
      color: #4caf50;
    }
    
    &--cancelled {
      color: #9e9e9e;
    }
  }
  
  &__content {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #f5f5f5;
  }
  
  &__image {
    width: 70px;
    height: 70px;
    border-radius: 4px;
    margin-right: 10px;
  }
  
  &__info {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  &__title {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
  }
  
  &__option {
    font-size: 12px;
    color: #999;
    margin-bottom: auto;
  }
  
  &__price-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  &__price {
    font-size: 15px;
    color: #ff6b6b;
    font-weight: 500;
  }
  
  &__quantity {
    font-size: 13px;
    color: #999;
  }
  
  &__footer {
    padding: 10px 15px 15px;
  }
  
  &__total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 15px;
    font-size: 13px;
    color: #666;
  }
  
  &__amount {
    margin-left: 10px;
  }
  
  &__amount-text {
    font-size: 15px;
    font-weight: bold;
    color: #ff6b6b;
  }
  
  &__actions {
    display: flex;
    justify-content: flex-end;
  }
  
  &__btn {
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    border-radius: 15px;
    font-size: 13px;
    margin-left: 10px;
    
    &--default {
      background-color: #f5f5f5;
      color: #666;
    }
    
    &--primary {
      background-color: #07c160;
      color: #ffffff;
    }
  }
}
</style>
